'use client';

import type { IQueryPostDetails } from '@/interfaces';
import Link from 'next/link';
import { formatDate } from '@/lib/tool';
import {
  POST_OTHER_STATE_KEY,
  POST_REVIEW_STATE_KEY,
  POST_SORT_STATE_KEY,
  POST_STATE_KEY,
} from '@/lib/constant';
import classNames from 'classnames';

export default function QueryPostInfo({
  details,
}: {
  details: IQueryPostDetails;
}) {
  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-info-square me-2"></i>
            <Link
              href={`/posts/${details.basic.id}`}
              className="link-dark text-decoration-none text-decoration-underline-hover"
            >
              {details.basic.name}
            </Link>
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <table className="table table-hover align-middle table-striped">
                <thead>
                  <tr className="text-nowrap">
                    <th scope="col" className="fw-normal">
                      ID
                    </th>
                    <th scope="col" className="fw-normal">
                      {details.basic.id}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ...new Set([
                      ...Object.keys(details.basic),
                      ...Object.keys(details.details),
                    ]),
                  ]
                    .filter(
                      (item) =>
                        ![
                          'id',
                          'content',
                          'user',
                          'tagGroups',
                          'tags',
                          'details',
                          'data',
                          'replyData',
                          'parentReplyData',
                          'childReplyData',
                          'viewCount',
                          'commentCount',
                          'replyCount',
                          'likeCount',
                          'followCount',
                          'favoriteCount',
                          'images',
                        ].includes(item),
                    )
                    .map((item) => {
                      return (
                        <tr key={item} className="text-nowrap">
                          <td>
                            {item === 'createdBy' && '创建用户'}

                            {item === 'updatedBy' && '更新用户'}

                            {item === 'creatorAlias' && '创建者别名'}

                            {item === 'updaterAlias' && '更新者别名'}

                            {item === 'createdOn' && '创建时间'}

                            {item === 'updatedOn' && '更新时间'}

                            {item === 'contentUpdatedOn' && '内容更新时间'}

                            {item === 'deleted' && '是否删除'}

                            {item === 'name' && '帖子名称'}

                            {item === 'overview' && '帖子概述'}

                            {item === 'customTags' && '自定义标签'}

                            {item === 'badges' && '徽章'}

                            {item === 'styles' && '样式'}

                            {item === 'section' && '版块名称'}

                            {item === 'state' && '状态'}

                            {item === 'reviewState' && '审核状态'}

                            {item === 'otherStates' && '其他状态'}

                            {item === 'sortState' && '排序状态'}

                            {item === 'allow' && '白名单'}

                            {item === 'block' && '黑名单'}
                          </td>
                          <td>
                            {item === 'createdBy' && details.basic[item]}

                            {item === 'updatedBy' && details.basic[item]}

                            {item === 'creatorAlias' && details.basic[item]}

                            {item === 'updaterAlias' && details.basic[item]}

                            {item === 'createdOn' &&
                              formatDate(details.basic[item])}

                            {item === 'updatedOn' &&
                              formatDate(details.basic[item])}

                            {item === 'contentUpdatedOn' &&
                              formatDate(details.basic[item])}

                            {item === 'deleted' && details.basic[item] + ''}

                            {item === 'name' && details.basic[item]}

                            {item === 'overview' && details.basic[item]}

                            {item === 'customTags' &&
                              details.basic[item].join(',')}

                            {item === 'badges' && (
                              <div className="hstack gap-2">
                                {details.basic[item]
                                  .sort((a, b) => a.sort - b.sort)
                                  .map((item) => {
                                    const style: any = {};
                                    if (
                                      item.colorMode !== 'DEFAULT' &&
                                      item.color
                                    ) {
                                      style.color = item.color;
                                    }
                                    if (
                                      item.colorMode !== 'DEFAULT' &&
                                      item.backgroundColor
                                    ) {
                                      style.backgroundColor =
                                        item.backgroundColor;
                                    }

                                    return (
                                      <span
                                        key={item.id}
                                        className={classNames(
                                          'badge lh-base',
                                          item.colorMode === 'DEFAULT' &&
                                            item.backgroundColorMode ===
                                              'DEFAULT'
                                            ? 'bg-info'
                                            : false,
                                          item.roundedPill
                                            ? 'rounded-pill'
                                            : false,
                                        )}
                                        style={style}
                                      >
                                        {item.name}
                                      </span>
                                    );
                                  })}
                              </div>
                            )}

                            {item === 'styles' && (
                              <ul className="list-unstyled">
                                {details.basic[item].map((value) => {
                                  return (
                                    <li key={value.id}>
                                      <ul className="list-unstyled">
                                        <li>名称：{value.name}</li>
                                        <li>图标：{value.icons.join(', ')}</li>
                                        <li>
                                          类名：{value.classes.join(', ')}
                                        </li>
                                        <li>
                                          <p>样式：</p>
                                          <ul className="list-unstyled">
                                            {Object.keys(value.styles).map(
                                              (key) => {
                                                return (
                                                  <li key={key}>
                                                    {value.styles[key]}
                                                  </li>
                                                );
                                              },
                                            )}
                                          </ul>
                                        </li>
                                      </ul>
                                    </li>
                                  );
                                })}
                              </ul>
                            )}

                            {item === 'section' &&
                              `${details.section.name}(${details.section.id})`}

                            {item === 'state' &&
                              POST_STATE_KEY[details.details[item]]}

                            {item === 'reviewState' &&
                              POST_REVIEW_STATE_KEY[details.details[item]]}

                            {item === 'otherStates' &&
                              (details.details[item].length === 0
                                ? ['DEFAULT']
                                : details.details[item]
                              )
                                .map((value) => POST_OTHER_STATE_KEY[value])
                                .join(',')}

                            {item === 'sortState' &&
                              POST_SORT_STATE_KEY[details.details[item]]}

                            {item === 'allow' &&
                              details.details[item]?.join(', ')}

                            {item === 'block' &&
                              details.details[item]?.join(', ')}
                          </td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
